<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		
		文档流 
			- 在网页的最底层，表示的是一个网页中的位置。
			- 我们所创建的元素默认都在文档流中
		
		元素在文档流中的特点
			- 块元素
				1 块元素在文档流中独占一行，从上到下排列。例如：div
				2 块元素在文档流的默认宽度是父元素的100%
				3 块元素的文档流中的默认高度是子元素的内容区高度
			- 内联元素
				1 只占自身大小从左到右排列。例如 span
		-->
		
		<!-- 
		当元素的高度或者宽度为auto，内边距不会影响可见区。
		而是会自动修改宽度和高度，适应内边距。
		 -->
		<div style="background-color: #bfa; padding-left: 100px;">a</div>
		<div style="width: 100px; height: 100px; background-color: #ff0;"></div>
		
		<span style="background-color: yellowgreen;">我是一个span</span>
		<span style="background-color: yellowgreen;">我是一个span</span>
		<span style="background-color: yellowgreen;">我是一个span</span>
		<span style="background-color: yellowgreen;">我是一个span</span>
	</body>
</html>
